<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>传统异步解决方案</title>
<style>
#result{
	height:400px;
	overflow:auto;
	background#EBE4E4;
	border:1px solid #2863DB;
}
</style>
</head>
<body>
<input type="file" name="file" id="file" multiple>
<div id="result">

</div>
<script src="jquery.min.js"></script>
<script src="eventemitter3.umd.min.js"></script>
<script>
function getVideoInfo(file, callback) {
    try {
        var url = URL.createObjectURL(file);
        var video = document.createElement("video")
        video.onloadedmetadata = function () {
            callback(this.videoWidth, this.videoHeight, this.duration);
        };
        video.onerror = function () {
            callback(0, 0, 0);
        };
        video.src = url;
    } catch (error) {
        console.log(error)
        callback(0, 0, 0)
    }
}
var task={};
task.init=function(){
	this.EE = new EventEmitter3();
	this.register_events();
	this.DATA={};
};
task.data=function(a,b){
	if(arguments.length==1){
		return this.DATA[a];	
	}
	this.DATA[a]=b;
	return this;
};
task.start=function(files){
	this.data('books',[
		{title:'a',author:'x'},
		{title:'b',author:'xx'},
	]);
	this.data('files',files);
	this.EE.emit('start',{});
};
task.register_events=function(){
	//第一步获取文件信息
	this.EE.on('start',function(data){
		console.log('开始处理文件');
		var files=task.data('files');
		for(var i=0;i<files.length;i++){
			~function(i,files){
				getVideoInfo(files[i],function(w,h,d){
					task.EE.emit('after_get_file_info',{
						i:i,
						file:files[i],
						total:files.length,
						w:w,
						h:h,
						d:d	
					});
				});
			}(i,files);
			
		}
	});
	//第二步展示文件信息
	this.EE.on('after_get_file_info',function(data){
		$('#result').append("<p>"+data.file.name+" "+data.file.size+"</p>");
		if($('#result').find('p').length==data.total){
			task.EE.emit('check_status',{
				num:data.total	
			});	
		}
	});
	//第三步请求网络
	this.EE.on('check_status',function(data){
		$.get("/test.json",{ name: "John", time: "2pm" },function(d){
			console.log(d);
			task.EE.emit('start_upload',{});
		},'json');
	});
	//第四步上传文件
	this.EE.on('start_upload',function(data){
		console.log('开始上传文件');
		console.log(task.data('books'));
		task.data('time',new Date());
		
		var kind='async';
		//异步
		if(kind=='async'){
			var files=task.data('files');
			task.data('uploaded_num',0);
			for(var i=0;i<files.length;i++){
				~function(i,files){
					var spent=Math.random()*10*1000;
					setTimeout(function(){
						task.EE.emit('finish_upload',{i:i,total:files.length,n:Math.random(),spent:spent});
					},spent);
				}(i,files);
				
			}
		}
		//同步
		if(kind=='sync'){
			function to_upload(i,files){
				if(i>=files.length) return;
				
				var spent=Math.random()*10*1000;
				setTimeout(function(){
					task.EE.emit('finish_upload',{i:i,total:files.length,n:Math.random(),spent:spent});
					to_upload(i+1,files);
				},spent);
			}
			var files=task.data('files');
			task.data('uploaded_num',0);
			to_upload(0,files);
		}
	});
	//第五步完成
	this.EE.on('finish_upload',function(data){
		console.log(data.i,'上传完成','结果',data.n,'耗时',data.spent);
		task.data('uploaded_num',task.data('uploaded_num')+1);
		if(task.data('uploaded_num')==data.total){
			console.log('全部文件上传完成');
		}
	});
};
task.init();
////////////////////////////////

$('#file').change(function(){
	$('#result').html('');
	var files=$(this).get(0).files;
	if(!files.length){
		alert('请选择文件');
		return;	
	}
	task.start(files);
});
</script>
</body>
</html>
